<template>
  <div class="article-wrap curr-main">
    <!-- <div class="search-header">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="标签名称">
          <el-input v-model="form.name" size="small"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
          <el-button size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="content-table">
      <div class="content-header">
        <h3>类型列表</h3>
        <div class="header-right">
          <el-button type="primary" size="small" @click.prevent="addType()">
            新增</el-button>
        </div>
      </div>
      <el-table :data="state.tableData" style="width: 100%" border>
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column prop="type_name" label="类型名称" align="center" />
        <!-- <el-table-column prop="" label="热门标签" align="center" >
          <template #default="scope">
            <span v-if="scope.row.is_hot==='1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" width="300">
          <template #default="scope">
            <el-button type="text" size="small" @click.prevent="editTypes(scope.row)">
              修改
            </el-button>
            <el-button type="text" size="small" @click.prevent="deleteTypes(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :currentPage="form.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
      <add-type-dialog ref="addTypeRef" @updateTypeList="updateTypeList"></add-type-dialog>
      <edit-type-dialog ref="editTypeRef" @updateTypeList="updateTypeList"></edit-type-dialog>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onBeforeMount } from 'vue'
import { getTypes,deleteType } from '@/api/type'
import { ElMessage, ElMessageBox } from 'element-plus'
import addTypeDialog from './components/addType.vue'
import editTypeDialog from './components/editType.vue'
interface form {
  pageNum: number
  pageSize: number
}
export default defineComponent({
  name: 'ManagementType',
  components:{addTypeDialog,editTypeDialog},
  setup() {
    // let tableData = reactive<Array<any>>([]);
    //定义表格数据
    const state = reactive({
      tableData: <Array<any>>[],
    })
    const total = ref(0)//总条数
    const addTypeRef = ref('addTypeRef')//新增表单实列
    const editTypeRef = ref('editTypeRef')//修改表实列
    //分页参数
    const form = reactive<form>({
      pageNum: 1,
      pageSize: 10,
    })
    onBeforeMount(() => {
      init()
    })
    //初始化列表
    const init = async () => {
      const { data: res } = await getTypes(form)
      state.tableData = res.data.result
      total.value = res.data.total
      console.log(state)
    }
    //切换分页
    const handleSizeChange = (val: number) => {
      form.pageSize = val
      init()
    }
    const handleCurrentChange = (val: number) => {
      form.pageNum = val
      init()
    }
    //修改类型弹窗
    const editTypes = (row:any) => {
      const editTypeRefValue: any = editTypeRef.value
      editTypeRefValue.open(row)
    }
    //删除类型
    const deleteTypes =  (id:string) => {
      ElMessageBox.confirm('确定要删除该类型?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await deleteType({ id: id })
          console.log(res)
          if (res.data.code !== 200) {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
            return
          }
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          init()
        })
        .catch(() => {})
    }
    //新增类型
    const addType = () => {
      const addTypeRefValue: any = addTypeRef.value
      addTypeRefValue.open()
    }
    //更新列表
    const updateTypeList = () => {
      init()
    }
    return {
      state,
      form,
      total,
      handleSizeChange,
      handleCurrentChange,
      addType,
      init,
      editTypes,
      deleteTypes,
      addTypeRef,
      editTypeRef,
      updateTypeList,
    }
  },
})
</script>

<style lang="scss" scoped>
.article-wrap {
  height: 100%;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.search-header {
  background: #fff;
  margin-bottom: 15px;
  padding-top: 22px;
  border-radius: 4px;
}
.content-table {
  background: #fff;
  border-radius: 4px;
  padding: 10px 15px;
}
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0 10px;
}
</style>